<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>店铺详情</title>

    <!-- Bootstrap Core CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" th:href="@{/LoginStyle/css/bootstrap.min.css}">

    <!-- Customizable CSS -->
    <link rel="stylesheet" href="assets/css/main.css" th:href="@{/indexStyle/css/main.css}">
    <link rel="stylesheet" href="assets/css/blue.css" th:href="@{/indexStyle/css/blue.css}">
    <link rel="stylesheet" href="assets/css/owl.carousel.css" th:href="@{/indexStyle/css/owl.carousel.css}">
    <link rel="stylesheet" href="assets/css/owl.transitions.css" th:href="@{/indexStyle/css/owl.transitions.css}">
    <link rel="stylesheet" href="assets/css/animate.min.css" th:href="@{/indexStyle/css/animate.min.css}">
    <link rel="stylesheet" href="assets/css/rateit.css" th:href="@{/indexStyle/css/rateit.css}">
    <link rel="stylesheet" href="assets/css/bootstrap-select.min.css"
          th:href="@{/indexStyle/css/bootstrap-select.min.css}">
    <link rel="stylesheet" href="button.css" th:href="@{/indexStyle/css/button.css}">

    <!-- Icons/Glyphs -->
    <link rel="stylesheet" href="assets/css/font-awesome.css" th:href="@{/indexStyle/css/font-awesome.css}">
    <style>
        /* .w {
            width: 800px;
            margin: 0 auto;
        } */

        textarea {
            resize: none;
        }

        .bar {
            width: 300px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            font-size: 18px;
            font-weight: 700;
            background-color: skyblue;
        }

        .body-box {
            margin-top: 15px;
            margin-left: 120px;
        }

        .body-box label {
            padding-left: 5px;
            width: 50px;
        }

        .body-box input {
            width: 280px;
        }

        #describe {
            height: 100px;
            width: 800px;
        }

        .upload {
            float: left;
        }

        .upload img {
            height: 225px;
            width: 165px;
        }
    </style>
</head>

<body class="cnt-home">
<header th:replace="~{user/fragment/IndexHeader:: indexHeader}"></header>
<div class="body-content outer-top-xs">
    <div class='container'>
        <div class="body w">
            <div class="bar">上架商品</div>
            <div class="body-box">
                <label for="goods-name">货物名:</label>
                <input type="text" id="goods-name">
            </div>
            <div class="body-box">
                <label for="kind">分类:</label>
                <select id="kind">
                    <option value="0">--未选择--</option>
                    <option value="服饰鞋包">服饰鞋包</option>
                    <option value="电子数码">电子数码</option>
                    <option value="图书影像">图书影像</option>
                    <option value="运动户外">运动户外</option>
                    <option value="个护化妆">个护化妆</option>
                    <option value="日用百货">日用百货</option>
                    <option value="食品保健">食品保健</option>
                    <option value="动漫周边">动漫周边</option>
                    <option value="其他">其他</option>
                </select>
            </div>
            <div class="body-box">
                <label for="price">现买价:</label>
                <input type="text" id="price">
            </div>
            <div class="body-box">
                <label for="price-strike">原价:</label>
                <input type="text" id="price-strike">
            </div>
            <div class="body-box">
                <label for="count">数量:</label>
                <input type="text" id="count">
            </div>
            <div class="body-box">
                <div class="upload">
                    <label for="picture1">封面1:</label>
                    <input type="file" id="picture1"/>
                    <img src="assets\images\products\p1.jpg" alt="上传的图片">
                </div>
                <div class="upload">
                    <label for="picture2">封面2:</label>
                    <input type="file" id="picture2">
                    <img src="assets\images\products\p1.jpg" alt="上传的图片">
                </div>
                <div class="upload">
                    <label for="picture3">详情1:</label>
                    <input type="file" id="picture3">
                    <img src="" alt="上传的图片">
                </div>
                <div class="upload">
                    <label for="picture4">详情2:</label>
                    <input type="file" id="picture4">
                    <img src="" alt="上传的图片">
                </div>
                <div class="upload">
                    <label for="picture5">详情3:</label>
                    <input type="file" id="picture5">
                    <img src="" alt="上传的图片">
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="body-box">
                <div>商品描述:</div>
                <textarea id="describe"></textarea>
            </div>
            <div class="body-box">
                <div class="button">
                    <a href="#" id="submit">提交</a>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- jQuery 3 -->
<script src="bower_components/jquery/dist/jquery.min.js" th:src="@{/LoginStyle/js/jquery.min.js}"></script>
<script src="assets/js/bootstrap.min.js" th:src="@{/LoginStyle/js/bootstrap.min.js}"></script>
<script src="assets/js/bootstrap-hover-dropdown.min.js"
        th:src="@{/indexStyle/js/bootstrap-hover-dropdown.min.js}"></script>
<script src="assets/js/owl.carousel.min.js" th:src="@{/indexStyle/js/owl.carousel.min.js}"></script>
<script src="assets/js/echo.min.js" th:src="@{/indexStyle/js/echo.min.js}"></script>
<script src="assets/js/jquery.easing-1.3.min.js" th:src="@{/indexStyle/js/jquery.easing-1.3.min.js}"></script>
<script src="assets/js/bootstrap-slider.min.js" th:src="@{/indexStyle/js/bootstrap-slider.min.js}"></script>
<script src="assets/js/jquery.rateit.min.js" th:src="@{/indexStyle/js/jquery.rateit.min.js}"></script>
<script src="assets/js/lightbox.min.js" th:src="@{/indexStyle/js/lightbox.min.js}"></script>
<script src="assets/js/bootstrap-select.min.js" th:src="@{/indexStyle/js/bootstrap-select.min.js}"></script>
<script src="assets/js/wow.min.js" th:src="@{/indexStyle/js/wow.min.js}"></script>
<script src="assets/js/scripts.js" th:src="@{/indexStyle/js/scripts.js}"></script>
<script th:src="@{/indexStyle/js/indexHeader.js}"></script>
<script>
    $(document).ready(function () {
        var fd = new FormData();
        $(".upload>input").change(function () {
            var reads = new FileReader();
            var file1 = $(this).get(0).files[0];
            fd.append('uploadFile', file1);
            var rep = /jpeg|png|gif|bmp/ig;
            var picStyle = file1.type.split("/")[1];
            if (rep.test(picStyle)) {
                reads.readAsDataURL(file1);
                var that = this;
                reads.onload = function (e) {
                    $(that).siblings("img").attr("src", this.result)
                };
            } else {
                alert("图片格式不正确，请上传 jpeg|png|gif|bmp 格式的图片")
            }
        });

        $("#submit").click(function () {
            var goodsName = $("#goods-name").val();
            fd.append('goodsName', goodsName);
            let kind = $('#kind option:selected').val();
            fd.append('kind',kind);
            var price = $("#price").val();
            fd.append('price', price);
            var oldPrice = $("#price-strike").val();
            fd.append('oldPrice', oldPrice);
            var goodsDescription = $("#describe").val();
            fd.append('goodsDescription', goodsDescription);
            var count = $("#count").val();
            fd.append('count', count);
            $.ajax({
                type: "post",
                url: "/User/upload/data",
                // dataType: "JSON",
                data: fd,
                processData: false,
                contentType: false,
                success: function (data) {
                    console.log(data);
                    window.location.href = "/User/store";
                }
            });
        });
    });
</script>
</body>

</html>